<template>
    <div class="root">
      <div class='exitButton'>
        <router-link to="/">
          <img src='~@/assets/home/exit.png'>
        </router-link>
      </div>
      <div class="course_title">
        <p class="week_content_title_text">tottalk 英语</p>
      </div>
      <div class="tottalk_grade" v-for="(item, index) in grade" :key="item" @click="opentottalk(index)" :class="{'one_up': index === 0, 'one_down': index === 1, 'two_up': index === 2, 'two_down': index === 3, 'three_up': index === 4, 'three_down': index === 5}">
        <p class="grade_text">{{item.name}}</p>
      </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        clicked: false,
        grade: [
          {
            name: '一级上'
          },
          {
            name: '一级下'
          },
          {
            name: '二级上'
          },
          {
            name: '二级下'
          },
          {
            name: '三级上'
          },
          {
            name: '三级下'
          }
        ]
      }
    },
    methods: {
      opentottalk (index) {
        let itemGrade = index + 1
        this.clicked = true
        setTimeout(() => {
          this.clicked = false
        }, 3000)
        if (itemGrade === 1) {
          let childpross = require('child_process')
          childpross.exec('start /max Startcd.exe', {cwd: 'resources/tottalk/TT1E-BOOK'}, (error, stdout, stderr) => {
            if (error) {
              console.log(error)
            } else {
              console.log('open TT1E-BOOK success')
            }
          })
        } else if (itemGrade === 2) {
          let childpross = require('child_process')
          childpross.exec('start /max Startcd.exe', {cwd: 'resources/tottalk/TT2 E-BOOK'}, (error, stdout, stderr) => {
            if (error) {
              console.log(error)
            } else {
              console.log('open TT2E-BOOK success')
            }
          })
        } else if (itemGrade === 3) {
          let childpross = require('child_process')
          childpross.exec('start /max Startcd.exe', {cwd: 'resources/tottalk/TT3 E-BOOK'}, (error, stdout, stderr) => {
            if (error) {
              console.log(error)
            } else {
              console.log('open TT3E-BOOK success')
            }
          })
        } else if (itemGrade === 4) {
          let childpross = require('child_process')
          childpross.exec('start /max Startcd.exe', {cwd: 'resources/tottalk/TT4 E-BOOK'}, (error, stdout, stderr) => {
            if (error) {
              console.log(error)
            } else {
              console.log('open TT4E-BOOK success')
            }
          })
        } else if (itemGrade === 5) {
          let childpross = require('child_process')
          childpross.exec('start /max Startcd.exe', {cwd: 'resources/tottalk/TT5 E-BOOK'}, (error, stdout, stderr) => {
            if (error) {
              console.log(error)
            } else {
              console.log('open TT5E-BOOK success')
            }
          })
        } else if (itemGrade === 6) {
          let childpross = require('child_process')
          childpross.exec('start /max Startcd.exe', {cwd: 'resources/tottalk/TT6 E-BOOK'}, (error, stdout, stderr) => {
            if (error) {
              console.log(error)
            } else {
              console.log('open TT6E-BOOK success')
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
.pdfcss >>> .canvasstyle {
    top: 54%;
    width: 47%;
}
.root > div {
  position: absolute;
}
.exitButton {
  right: 30px;
  top: 30px;
}
.course_title {
  width: 30%;
  left: 35%;
  top: 80px;
}
.week_content_title_text {
  line-height: 50px;
  text-align: center;
  color: white;
  font-size: 46px;
}
.tottalk_grade {
  width: 210px;
  height: 60px;
  border-radius: 5px;
  background: rgb(40, 139, 179)
}
.grade_text {
  line-height: 60px;
  color: white;
  text-align: center;
  margin: 0;
  font-size: 40px;
}
.one_up {
    top: 280px;
    left: 140px;
}
.one_down {
    top: 430px;
    left: 140px;
}
.two_up {
    top: 280px;
    left: 520px;
}
.two_down {
    top: 430px;
    left: 520px;
}
.three_up {
    top: 280px;
    left: 900px;
}
.three_down {
    top: 430px;
    left: 900px;
}
</style>
